import type { TrainPlanType } from '../../interface'
import { Tag } from 'antd-mobile'
import { useObserver } from 'mobx-react'
import useRoleCheck from '../../hooks/useRoleCheck'
import arrowRight from '@/static/trainPlan/arrow_right.png'
import styles from './index.module.less'

interface Props<T extends TrainPlanType.Data> {
    item: T
    onClickItem?: (args: T) => any
}

/** 计划卡片 */
const PlanCard = (props: Props<TrainPlanType.Data>) => {
    const { item } = props
    const { checkResult } = useRoleCheck({ item })

    return useObserver(() => {
        return (
            <div
                className={styles.planCard}
                key={item.id}
                onClick={() => props.onClickItem?.(item)}
            >
                <div className={styles.planCard_header}>
                    <label>{item.name}</label>
                    <Tag color={checkResult.color} fill="outline">
                        {checkResult.text}
                    </Tag>
                </div>
                <div className={styles.planCard_content}>
                    <div>
                        <div className={styles.planCard_content_unit}>
                            单位：{item.company_name}
                        </div>
                        <div className={styles.planCard_content_time}>
                            提交时间：{item.create_time}
                        </div>
                    </div>

                    <div className={styles.planCard_operation}>
                        <img src={arrowRight} />
                    </div>
                </div>
            </div>
        )
    })
}

export default PlanCard
